<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../include/laypublic.jsp" %>
<%@ include file="../include/vueComponent.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>批复机构选择详情</title>
</head>
<link rel="stylesheet" href="${ctx}/resources/vue-element-lib/detail.css">
<style>
    .list {
        margin-bottom: 30px;
    }

    .list > .item {
        border: 1px solid rgb(229, 229, 229);
        position: relative;
        padding: 30px 0;
    }

    .item_add {
        width: 87.5%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
    }

    .list > .item > img {
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translate(-0%, -50%); /* 50%为自身尺寸的一半 */
    }
</style>
<body>
<div id="app">
    <div class="layui-tab layui-tab-brief" lay-filter="xqxx-tab-all">
        <ul class="layui-tab-title">
            <li id="tbglId" class="layui-this" lay-id="0">
                批复机构选择详情
            </li>
            <%--            <li id="zgysId" lay-id="1">历史审批信息</li>--%>
        </ul>
        <div class="layui-tab-right">
            <c:if test="${isAuditFlag eq '1'}">
                <template v-if="layId==0">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" @click="save(0)">保存
                    </button>
                    <button type="button" class="layui-btn layui-btn-radius" @click="save(1)">提交</button>
                </template>
            </c:if>
            <c:if test="${auditTabFlag eq '1'}">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" @click="audit(0)">
                    不同意
                </button>
                <button type="button" class="layui-btn layui-btn-radius" @click="audit(1)">同意</button>
            </c:if>
        </div>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <div class="container">
                    <el-form ref="formRef" label-width="180px" label-suffix="："
                             label-position="left">
                        <div class="title">
                            <h3>融资基础信息</h3>
                        </div>
                        <el-row>
                            <x-col>
                                <el-form-item label="项目名称">
                                    <span>{{financialInstitutions.proName}}</span>
                                </el-form-item>
                            </x-col>
                            <x-col position="right">
                                <el-form-item label="项目编码">
                                    <span>{{financialInstitutions.proCode}}</span>
                                </el-form-item>
                            </x-col>
                        </el-row>

                        <el-row>
                            <x-col position="full">
                                <el-form-item label="是否需要担保">
                                    <el-radio v-model="financialInstitutions.guaranteeStatus" label="1">是</el-radio>
                                    <el-radio v-model="financialInstitutions.guaranteeStatus" label="0">否</el-radio>
                                </el-form-item>
                            </x-col>
                        </el-row>

                        <div class="title">
                            <h3>跟踪信息列表</h3>
                        </div>
                        <div class="list">
                            <div class="item" v-for="(item,index) in financialInstitutionsDetailList" :key="index">
                                <el-row>
                                    <x-col>
                                        <el-form-item :label="'金融机构'+(index+1)">
                                            <span>{{item.dockBank}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="融资主体">
                                            <span>{{item.sgCoopId}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="融资团队负责人">
                                            <span>{{item.leader}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="批复结果">
                                            <span>{{item.replyResults}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="银行批复意见">
                                            <span>{{item.bankApprovalOpinion}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="金融机构类型">
                                            <span>{{queryFinancingTypeList(item.capType)}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="贷款类型">
                                            <span>{{queryLoanStyleEnumList(item.paymentType)}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="融资期限">
                                            <span>{{item.financingMaturity}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="融资金额">
                                            <span>{{item.financingAmount}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="还款方式">
                                            <span>{{item.repayType}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="合同融资成本">
                                            <span>{{item.capCost}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="资金用途">
                                            <span>{{item.capitalType}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="增信方式">
                                            <span>{{item.bailMode}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="综合成本">
                                            <span>{{item.multiCost}}</span>
                                        </el-form-item>
                                    </x-col>
                                    <x-col position="right">
                                        <el-form-item label="还款来源">
                                            <span>{{item.repaySource}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="批复首次启用截止日期">
                                            <span>{{item.deadlineApprovalFirst}}</span>
                                        </el-form-item>
                                    </x-col>

                                </el-row>
                                <el-row>
                                    <x-col position="full">
                                        <el-form-item label="审批意见">
                                            <span>{{item.approvalOpinion}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col position="full">
                                        <el-form-item label="放款前提条件">
                                            <span>{{item.conditionsLoan}}</span>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col position="full">
                                        <el-form-item label="其他">
                                            <x-input v-model="item.rests" type="textarea" :rows="4"
                                                     name="其他"></x-input>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col position="full">
                                        <el-form-item label="是否选择该机构">
                                            <el-radio v-model="item.choose" label="1">是</el-radio>
                                            <el-radio v-model="item.choose" label="0">否</el-radio>
                                        </el-form-item>
                                    </x-col>
                                </el-row>
                                <el-row>
                                    <x-col>
                                        <el-form-item label="拟提用授信金额">
                                            <x-input v-model="item.amountCreditExtension" type="number" min="0"
                                                     name="拟提用授信金额"></x-input>
                                        </el-form-item>
                                    </x-col>
                                </el-row>

                            </div>
                        </div>
                        <div class="title">
                            <h3>项目最新进展</h3>
                        </div>
                        <el-row>
                            <x-col>
                                <el-form-item label="合同签署方式">
                                    <x-select v-model="financialInstitutions.contractSigning" :options="list"
                                              name="合同签署方式"></x-select>
                                </el-form-item>
                            </x-col>

                        </el-row>

                        <c:if test="${auditTabFlag eq '1'}">
                            <div class="title">
                                <h3>审批信息</h3>
                            </div>
                            <%@ include file="process/process-audit.jsp" %>
                        </c:if>

                    </el-form>
                </div>
            </div>
            <div class="layui-tab-item">
                <%--                <%@ include file="process/process-history.jsp" %>--%>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/resources/vue-element-lib/jquery.js"></script>
<script>
    var fileArr = [];
    var staticPath = '${fileHttpPre}';
    layui.config({
        base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'set', 'upload', 'table', 'transfer', 'laydate', 'element', 'layer'], function () {
        var $ = layui.$
            , upload = layui.upload
            , table = layui.table
            , element = layui.element
            , layer = layui.layer;

        //选项卡切换监听
        element.on('tab(xqxx-tab-all)', function (data) {
            var layId = $(this).attr('lay-id');
            vm.$data.layId = layId;
            if (layId === "0") {

            } else if (layId === "1") {
                loadTable(layId);
            }
        });

        function loadTable(layId) {
            // 表单
            table.render({
                elem: '#lay-lsspxx-create-manage'
                , url: basePath + '/historyProcess/list?proCode=${proCode}'
                , cols: [[
                    {
                        field: 'startTime', title: '发起时间', width: 145, width: 155, templet: function (d) {
                            return layui.util.toDateString(d.startTime, "yyyy-MM-dd HH:mm:ss");
                        }
                    }
                    , {field: 'startRealName', title: '发起人', width: 145}
                    , {field: 'proFlowType', title: '审批阶段', width: 145}
                    , {field: 'proFlowNode', title: '审批节点', width: 145}
                    , {
                        field: 'dealTime', title: '审批日期', width: 155, templet: function (d) {
                            return layui.util.toDateString(d.dealTime, "yyyy-MM-dd HH:mm:ss");
                        }
                    }
                    , {field: 'dealName', title: '审批人', width: 160}
                    , {
                        field: 'state', title: '审批状态'
                    }
                    , {
                        title: '操作', width: 140, align: 'center', fixed: 'right', templet: function (d) {
                            var optStr = "";
                            optStr += '<a class="layui-btn layui-btn-xs" lay-event="view"><i class="layui-icon layui-icon-form"></i>查看</a>';
                            return optStr;
                        }
                    }
                ]]
                , page: true
                , limit: 10
            });

            // 监听操作列
            table.on('tool(lay-lsspxx-create-manage)', function (obj) {
                var data = obj.data;
                if (obj.event === 'view') {//查看
                    parent.layui.index.openTabsPage(basePath + '/historyProcess/toDetail?processId=' + data.processId, '历史流程信息 > 详情');
                }
            });
        }

    });

    //删除文件
    function del(index) {
        layui.$("#fileAtt_" + index).remove();
        layui.$("#upload_img_" + index).remove();
        fileArr.map((el, idx) => {
            if (el.split('|')[2] == index) {
                fileArr.splice(idx, 1)
            }
        })
    }

    //根据url查看文件
    function showImg(url) {
        var openWin = window.open(url, '', 'left=410,height=768, width=1024, top=200,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
    }

    /*核心*/
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                procNodeList: [],
                tempNodeList: [],
                auditMsg: '',//审批意见
                processId: '',

                id: '',
                proCode: '',
                layId: 0,
                financialInstitutions: {},
                financialInstitutionsDetailList: [],
                list: [
                    {code: '1', name: '独立签署'},
                    {code: '2', name: '合并签署'},
                ],
                financingTypeList: [],
                loanStyleEnumList: [],//贷款类型
            }
        },
        created() {
            this.id = "${id}";
            this.proCode = "${proCode}";
            this.processId = "${processId}";
            this.financingType();
            this.queryByIdDetail();
            this.queryProcessList();
        },
        mounted() {

        },
        computed: {},
        component: {},
        methods: {
            queryFinancingTypeList(code) {
                console.log(code)
                let that = this;
                let name = '';
                if (code) {
                    that.financingTypeList.map(el => {
                        if (el.code == code) {
                            name = el.name
                        }
                    })
                    return name
                } else {
                    return ''
                }
            },
            queryLoanStyleEnumList(code) {
                let that = this;
                let name = '';
                if (code) {
                    that.loanStyleEnumList.map(el => {
                        if (el.code == code) {
                            name = el.name
                        }
                    })
                    return name
                } else {
                    return ''
                }
            },
            financingType() {
                let that = this;
                //金融机构
                zAjax('/submitApproval/financingType', {}).then(res => {
                    that.financingTypeList = res
                })
                //贷款类型
                zAjax('/submitApproval/loanStyleEnum', {}).then(res => {
                    that.loanStyleEnumList = res
                })
            },

            queryByIdDetail() {
                let that = this;
                zAjax('/financialInstitutions/queryByIdDetail', {id: that.id, proCode: that.proCode}).then(res => {
                    that.financialInstitutions = res.financialInstitutions;
                    that.financialInstitutionsDetailList = res.financialInstitutionsDetailList;
                })
            },
            error(text) {
                this.$message({
                    message: text,
                    type: 'warning'
                });
            },
            // proSell/queryCoopInfo

            save(type) {
                let that = this;
                let obj = {
                    financialInstitutions: that.financialInstitutions,
                    financialInstitutionsDetailList: that.financialInstitutionsDetailList,
                }
                let str = JSON.stringify(obj).replace(/\"/g, '\\"');
                zAjax('/financialInstitutions/save', {
                    financialInstitutionsDto: str,
                    identifying: type + '',
                    proCode: that.proCode,
                    id: that.id
                }).then(res => {
                    if (res.success) {
                        that.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        setTimeout(function () {
                            // 刷新首页
                            let index = window.parent.layui.admin.tabsPage.index
                            if (index == null) {
                                window.close();
                            } else {
                                var iframe = window.parent.layui.admin.tabsBody((index - 1)).find(".layadmin-iframe");
                                iframe[0].contentWindow.location.reload();
                                top.layui.admin.closeThisTabs(); // 关闭当前标签页
                            }
                        }, 3000);
                    } else {
                        that.$message.error(result.msg);
                    }

                })
            },
            queryProcessList() {
                let that = this;
                zAjax('/capHistoryProcess/processList', {processId: that.processId}).then(res => {
                    that.procNodeList = res.entity.procNodeList;
                    that.tempNodeList = res.entity.tempNodeList;
                })
            },
            audit(status) {
                let that = this;
                zAjax('/financialInstitutions/auditProcess', {
                    id: that.id,
                    processId: that.processId,
                    status: status,
                    auditMsg: that.auditMsg,
                }).then(res => {
                    if (res.success) {
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        setTimeout(function () {
                            // 刷新首页
                            let index = window.parent.layui.admin.tabsPage.index
                            if (index == null) {
                                window.close();
                            } else {
                                var iframe = window.parent.layui.admin.tabsBody((index - 1)).find(".layadmin-iframe");
                                iframe[0].contentWindow.location.reload();
                                top.layui.admin.closeThisTabs(); // 关闭当前标签页
                            }
                        }, 3000);
                    } else {
                        that.$message.error('保存失败');
                    }
                })
            }

        }
    })
</script>
</body>
</html>

